<template>
	<scroll-view :scroll-y="true" @scroll="scrollTop" class="personal">
		<view class="head" :style="istop ? {}:{background:'0'}">
			<view class="head_li">
				<uni-icons type="back" size="30" color="#fff" :class="(istop ? 'icon_back':'icon_back_top')"
					@click="navigBack"></uni-icons>
				<text v-show="istop">个人资料</text>
				<uni-icons :class="(istop ? 'icon':'icon_top')" type="gear-filled" size="28" color="#fff"
					@click="Navigator('setup')" v-show="fid == myInfo.id"></uni-icons>
			</view>
		</view>
		<up-overlay :show="show" @click="show = false" opacity="0.8">
			<view class="selectImg">
				<image :src="info.avatar"></image>
			</view>
		</up-overlay>
		<up-popup :show="myshow" @close="myshow=false" mode="bottom" bgColor="transparent">
			<view class="b_pop">
				<view class="p_head">
					<view class="item" @click="setAvatar">更换头像</view>
					<view class="item" @click="show=true,myshow=false">查看头像</view>
				</view>
				<view class="p_btom" @click="myshow = false">
					<text>取消</text>
				</view>
			</view>
		</up-popup>
		<view class="body">
			<view class="image"></view>
			<view class="detail">
				<view class="d_head">
					<image :src="info.avatar" @click="memoImg"></image>
					<view class="text">
						<text class="one" v-show="fid === myInfo.id">{{info.nickName}}</text>
						<text class="one" v-show="fid != myInfo.id">{{info.remarls}}</text>
						<text>昵称:{{info.nickName}}</text>
						<up-copy :content="info.account">
							<text>轩号:{{info.account}}</text>
						</up-copy>
					</view>
				</view>
				<view class="d_list">
					<view class="item" v-for="(item,i) in list" :key="i">
						<view class="i_one">{{item.name}}&nbsp;:&nbsp;{{item.val}}</view>
						<uni-icons type="forward" size="25" color="#d3d3d3" class="icon"></uni-icons>
					</view>
				</view>
				<view class="kong">
					<view class="k_item" v-for="(item,i) in botomList" :key="i">
						<view class="k_left">
							<image :src="item.icon"></image>
							<text>{{item.name}}</text>
						</view>
						<uni-icons type="forward" size="25" color="#d3d3d3" class="icon"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="btom" v-show="fid != myInfo.id">
			<view class="call" v-show="isFriend">音视频通话</view>
			<view class="send" @click="Navigator('msg')" v-show="isFriend">发消息</view>

			<!-- 未添加 -->
			<view class="add" v-show="!isFriend" @click="Navigator('add')">加好友</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getUserDetail,updateAvatar,getUserById
	} from '../../common/api';
	export default {
		computed: {
			...mapState('info', ['myInfo'])
		},
		data() {
			return {
				info: {},
				istop: false,
				isFriend: false,
				route: '',
				list: [{
						name: '等级',
						val: '123星'
					},
					{
						name: '特权',
						val: 'TA还未开通任何特权服务'
					},
					{
						name: '签名',
						val: '111111'
					},
					{
						name: '标签',
						val: '帅哥'
					},
				],
				botomList: [{
						icon: '../../static/chat-icons/space.png',
						name: '他的个人空间'
					},
					{
						icon: '../../static/chat-icons/imgs.png',
						name: '精选照片'
					},
				],
				bodyheight: 0,
				fid: null,
				show: false,
				myshow:false,
			};
		},
		onLoad(val) {
			this.fid = parseInt(val.fid);
			this.Init(this.fid);
		},
		onShow() {
			this.Init(this.fid)
		},
		methods: {
			...mapMutations('info',['CreateMyInfo']),
			Init(cid) {
				getUserDetail({
					uid: this.myInfo.id,
					fid: this.fid
				}).then((res) => {
					let data = res.data
					if (res) {
						this.info = data;
						this.list[2].val = data.sign
						this.list[3].val = data.label
						if (data.isFriend === 1) {
							this.isFriend = true;
						} else {
							this.info.remarls = data.nickName;
							this.isFriend = false;
						}
					}
				})
				let systemInfo = uni.getSystemInfoSync();
				let botom = systemInfo.windowWidth / 750 * 150;
				let bodyheight = systemInfo.windowHeight - botom;
				this.bodyheight = bodyheight + 'px';
			},
			navigBack() {
				if(this.fid == this.myInfo.id){
					uni.switchTab({
						url: '/pages/message/message'
					})
					return;
				}
				uni.navigateBack();
			},
			Navigator(val) {
				if (val == 'msg') {
					uni.navigateTo({
						url: '/subpkg/chat_interface/chat_interface?cId=' + this.info.cid + '&nickName=' + this
							.info.nickName
					})
				}
				if (val == 'add') {
					uni.navigateTo({
						url: '/subpkg/add_friend/add_friend?uid=' + this.info.uid
					})
				}
				if (val == 'setup') {
					uni.navigateTo({
						url: '/subpkg/setup/setup'
					})
				}
			},
			scrollTop(e) {
				this.istop = false;
				if (e.detail.scrollTop >= 150) {
					this.istop = true;
				}
			},
			setAvatar() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						updateAvatar({path:tempFilePaths[0],id:this.myInfo.id}).then((ures)=>{
							let ure = JSON.parse(ures);
							if(ure.code == 200){
								getUserById({uid:this.myInfo.id}).then((res)=>{
									this.CreateMyInfo(res.data);
									this.Init(this.fid);
								})
								this.myshow = false;
							}
						})
					}
				});
			},
			memoImg(){
				if(this.fid === this.myInfo.id){
					this.myshow = true;
					return;
				}
				this.show = true;
			}
		}
	}
</script>

<style lang="scss">
	.personal {
		height: v-bind(bodyheight);

		.head {
			background: linear-gradient(90deg, rgba(122, 220, 241, 1) 0%, rgba(43, 163, 242, 1) 48%);
			width: 750rpx;
			height: 150rpx;
			position: fixed;
			z-index: 2;

			.head_li {
				position: absolute;
				bottom: 0;
				width: 750rpx;
				height: 120rpx;
				display: flex;
				justify-content: space-between;
				line-height: 100rpx;
				padding: 0 0rpx;

				text {
					color: #fff;
					font-size: 035rpx;
					opacity: 0.8;
					padding: 10rpx 10rpx;
					display: flex;
					line-height: 80rpx;
				}

				%base {
					&:active {
						transform: scale(0.9);
						transition: transform 0.1s;
					}
				}

				.icon_back {
					@extend %base;
					padding: 15rpx 20rpx;

				}

				.icon_back_top {
					@extend %base;
					border-radius: 50rpx;
					background-color: rgba(108, 108, 108, 0.5);
					backdrop-filter: blur(10rpx);
					width: 50rpx;
					height: 50rpx;
					margin: 18rpx 15rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.icon {
					@extend %base;
					padding: 15rpx 30rpx;
				}

				.icon_top {
					@extend %base;
					border-radius: 50rpx;
					background-color: rgba(108, 108, 108, 0.5);
					backdrop-filter: blur(10rpx);
					width: 50rpx;
					height: 50rpx;
					margin: 18rpx 15rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.selectImg {
			width: 500rpx;
			height: 500rpx;
			position: absolute;
			top: 30vh;
			left: 50rpx;

			image {
				width: 650rpx;
				height: 600rpx;
			}
		}

		.b_pop {
			height: 350rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #ebebeb;

			.p_head {
				width: 750rpx;
				height: 200rpx;
				padding-top: 20rpx;
				border-radius: 20rpx 20rpx 0 0;
				background-color: #fff;

				.item {
					border-bottom: 1rpx solid #dadada;
					width: 750rpx;
					height: 60rpx;
					padding: 20rpx 0;
					font-size: 34rpx;
					display: flex;
					justify-content: center;

					&:active {
						background-color: #e4e4e4;
					}
				}
			}

			.p_btom {
				margin-top: 30rpx;
				height: 100rpx;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				font-weight: bold;

				&:active {
					background-color: #e4e4e4;
				}
			}
		}

		.body {
			width: 750rpx;

			.image {
				background-image: url('../../static/bj.gif');
				background-size: cover;
				background-position: center;
				width: 750rpx;
				height: 500rpx;
			}

			.detail {
				background-color: #e9e9e9;
				height: 60vh;
				margin-top: -100rpx;
				border-radius: 40rpx;

				.d_head {
					height: 220rpx;
					display: flex;
					align-items: center;
					background-color: #ffffff;
					border-radius: 50rpx 50rpx 0 0;

					image {
						width: 180rpx;
						height: 180rpx;
						border-radius: 100rpx;
						margin: 10rpx 30rpx;
					}

					.text {
						color: #868686;
						font-size: 25rpx;
						display: flex;
						flex-direction: column;
						line-height: 40rpx;

						.one {
							color: #000000;
							font-size: 35rpx;
							font-weight: bold;
							padding-bottom: 5rpx;
						}
					}
				}

				.d_list {
					height: 400rpx;
					background-color: #fff;

					.item {
						height: 100rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28rpx;
						padding: 0 10rpx;

						.i_one {
							padding: 0 20rpx;
						}

						&:active {
							background-color: #d6d6d6;
							transition: background-color 0.1s;
						}
					}
				}

				.kong {
					margin-top: 20rpx;
					height: 20vh;
					background-color: #fff;

					.k_item {
						height: 100rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 10rpx;

						.k_left {
							display: flex;
							align-items: center;

							image {
								width: 50rpx;
								height: 50rpx;
								padding: 0 10rpx;
							}

							text {
								font-size: 28rpx;
								padding: 0 10rpx;
							}
						}

						&:active {
							background-color: #d6d6d6;
							transition: background-color 0.1s;
						}
					}
				}
			}
		}

		.btom {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 150rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.call {
				border: 1rpx solid #535353;
				width: 190rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;

				&:active {
					background-color: #f1f1f1;
				}
			}

			.send {
				border: 1rpx solid #535353;
				width: 190rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				border-radius: 10rpx;
				background-color: rgba(52, 150, 255, 1.0);

				&:active {
					background-color: rgba(48, 131, 255, 1.0);
				}
			}

			.add {
				background-color: rgba(52, 150, 255, 1.0);
				width: 600rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				border-radius: 10rpx;

				&:active {
					background-color: rgba(48, 131, 255, 1.0);
				}
			}
		}
	}
</style>